<template>
  <div class="data-inter">
    <div class="content">
      <div class="title">
        <span>{{name}}</span>
      </div>
      <div class="formula">{{tip}}</div>
      <div class="percent">{{content.clickRatePer + '%'}}</div>
      <div class="margin-b-10">
        <div class="span-name" v-text="time === 'month' ? $t('market.compMonth'): time === 'today' ? $t('market.compYest') : $t('market.compWeek')"></div>
        <span><i class="iconfont" :class="content.compCountPer > 0 ? 'icon-shangsheng' : 'icon-xiajiang'" v-show="content.compCountPer != '0.00'"></i>{{content.compCountPer + '%'}}</span>
      </div>
      <div class="margin-b-20">
        <div class="span-name" v-text="time === 'month' ? $t('market.averageMonthN'): $t('market.averageWeekN')"></div>
        <span class="font-color">{{content.averageCountPer + '%'}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'dataInterpretation',
    data () {
      return {
      }
    },
    props: {
      name: {type: String, default: function () { return {} }},
      content: {type: Object, default: function () { return {} }},
      tip: {type: String, default: function () { return {} }},
      time: {type: String, default: function () { return {} }}
    },
    components: {
    },
    created () {
//      this.$router.push({ path: '/index/monitor/table' })
    },
    methods: {
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl";
  .data-inter
    border 1px solid #ccc
    margin auto
  .title
    text-align center
    margin-top 30px
    color: $cf-gray0
  .percent
    text-align center
    margin-top 10px
    margin-bottom 20px
    font-size 30px
    line-height 30px
    color $cf-gray4
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  .font-color
    color $cf-gray1
  .formula
    color $cf-gray4
    text-align center
    margin-top 5px
  .content
    width: 150px;
    margin-left: 0px;
    margin-right: 0px;
    margin: auto;
    color $cf-gray4
    white-space: nowrap
  .span-name
    width 80px
    display inline-block
  .icon-xiajiang
    color $c-pink
    font-size 12px
    line-height 12px
  .icon-shangsheng
    color $c-main
    font-size 12px
    line-height 12px
  .margin-b-10
    margin-bottom 10px
  .margin-b-20
    margin-bottom 20px
  .padding-r-10
    padding-right 10px
  .icon-tixingweizhi
    display inline-block
    font-size 12px
    color $c-main
    line-height 12px
    height 13px
    width 13px
    text-align center
    border-radius 50%
    border 1px solid $c-main
    margin-left 5px
    padding 1px
</style>
